<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #chart {
            width: 500px;
            height: 400px;
            outline: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script src="./echarts.min.js"></script>
    <script>

        const data = [
            {
                name: 'kill',
                zhangsan: 19,
                lisi: 10,
            },
            {
                name: 'monster',
                zhangsan: 100,
                lisi: 110,
            },
            {
                name: 'blood',
                zhangsan: 200,
                lisi: 300,
            },
            {
                name: 'tower',
                zhangsan: 3,
                lisi: 2,
            },
            {
                name: 'damage',
                zhangsan: 50000,
                lisi: 4396,
            },
            {
                name: 'die',
                zhangsan: 2,
                lisi: 1,
            },
        ].map(function (item) {
            return {
                name: item.name,
                zhangsan: item.zhangsan,
                lisi: item.lisi,
                max: item.zhangsan > item.lisi ? item.zhangsan : item.lisi,
            };
        });

        

        // 初始化图表容器
        const chartDOM = document.querySelector('#chart');
        const chart = echarts.init(chartDOM);

        // 配置项
        const config = {
            legend: {
                data: ['张三', '李四']
            },
            radar: {
                // shape: 'circle',
                // indicator: [
                //     { name: '销售（Sales）', max: 6500},
                //     { name: '管理（Administration）', max: 16000},
                //     { name: '信息技术（Information Technology）', max: 30000},
                //     { name: '客服（Customer Support）', max: 38000},
                //     { name: '研发（Development）', max: 52000},
                //     { name: '市场（Marketing）', max: 25000}
                // ]
                indicator: data,
            },
            series: [{
                type: 'radar',
                data: [
                    {
                        value: data.map(function (item) {
                            return item.zhangsan;
                        }),
                        name: '张三'
                    },
                    {
                        value: data.map(function (item) {
                            return item.lisi;
                        }),
                        name: '李四'
                    }
                ]
    }]
        };

        // smooth 平滑过渡

        // 导入配置项
        chart.setOption(config);
    </script>
</body>
</html>